<template>
  <div class="main-page device-brand">
    <PageSearch :search-form-config="searchFormConfig" :form-data.sync="formData" @searchBtnClick="handleSearch" />
    <el-row type="flex" justify="end">
      <el-button type="primary" icon="el-icon-plus" size="medium" @click="handleCreateUser">
        新建
      </el-button>
    </el-row>
    <PageContent ref="pageContent" :form-data="formData" :content-table-config="contentConfig">
      <template #billType="scope">
        <span v-if="scope.row.billType == 0">
          月结
        </span>
        <span v-if="scope.row.billType == 1">
          周结
        </span>
        <span v-if="scope.row.billType == 2">
          日结
        </span>
      </template>
      <template #operate="{ row }">
        <el-button type="text" size="small" icon="el-icon-edit" @click="handleSetAdmin(row)">
          设置管理员
        </el-button>
        <el-button type="text" size="small" icon="el-icon-refresh-left" @click="handleServiceUser(row)">
          设置业务经理
        </el-button>
        <el-button type="text" size="small" icon="el-icon-edit" @click="handleEdit(row)">
          编辑
        </el-button>
        <el-button type="text" size="small" icon="el-icon-delete" class="delete-btn" @click="handleDelete(row)">
          删除
        </el-button>
      </template>
    </PageContent>

    <Modal :id="id" :show.sync="dialogVisible" :btn-loading="btnLoading" @confirm="handleConfirm">
    </Modal>
    <setManagerDialog :id="id" :show.sync="dialogVisibleSetManager" :btn-loading="btnLoading"
      @confirm="handleConfirmSetManager"></setManagerDialog>
      <PageModal :modal-form-data="modalFormData" :modal-form-config="serviceModalFormConfig"
      :visible.sync="dialogServiceVisible" title="修改业务经理" :btn-loading="confirmBtnLoading"
      @confirm="handleServiceConfirm" />
  </div>
</template>

<script>
import { contentConfig } from "./config/content.config";
import { searchFormConfig } from "./config/search.config";
import Modal from "./modal.vue";
import setManagerDialog from "./setManager.vue";
import { serviceModalFormConfig } from "../team/config/serviceModal.config";
import {
  fetchSaveDeviceBrand,
  fetchDeleteDeviceBrand,
  setManager,
  deleteProfitByIds
} from "@/api/userTeam.js";
import { fetchUpdateService,fetchUpdateServiceTeam } from "@/api/useManage";

import { getUserList } from "@/api/user";

export default {
  name: "UserTeam",
  components: {
    Modal,
    setManagerDialog
  },
  data() {
    return {
      contentConfig,
      searchFormConfig,
      btnLoading: false,
      dialogVisible: false,
      dialogVisibleSetManager: false,
      formData: {}, // 搜索表单数据
      title: "",
      id: null,
      teamId: '',
      serviceModalFormConfig,
      modalFormData: {
        name: "",
        phone: "",
        roleIds: [],
        gradeLevel: "",
        order: undefined,
        teamId: '',
      }, // 模态框表单数据
      dialogServiceVisible: false,
      confirmBtnLoading: false,
    };
  },
  mounted(){
    this.getUserListReq();
  },
  methods: {
    handleServiceUser(row) {
      // fetchUserDetail(id).then((res) => {
      //   this.modalFormData = { id, ...res.data };

      // });
      this.modalFormData = row;
      this.dialogServiceVisible = true;
    },
    getUserListReq() {
      getUserList({ pageSize: 10000, pageNum: 1 }).then((res) => {
        this.serviceModalFormConfig.formItems.forEach((item) => {
          if (item.field === "serviceUserId") {
            item.options = res.data?.userList.map((it) => {
              return {
                label: `${it.name}（${it.phone}）`,
                value: it.id,
              };
            });
          }
        });
      });
    },
    handleServiceConfirm(data) {
      this.confirmBtnLoading = true;
      const { id, serviceUserId } = { ...this.modalFormData, ...data };
      fetchUpdateServiceTeam({ teamId: id, serviceUserId })
        .then(() => {
          this.$message.success("操作成功。");
          this.dialogServiceVisible = false;
          this.handleSearch();
        })
        .finally(() => {
          this.confirmBtnLoading = false;
        });
    },
    handleSearch() {
      this.$refs.pageContent.queryTblMain();
    },
    handleCreateUser() {
      this.id = null;
      this.dialogVisible = true;
    },
    handleEdit({ id }) {
      // this.id = undefined;
      this.id = id;
      // this.handleSearch();
      this.dialogVisible = true;
    },
    handleDelete({ id }) {
      this.$confirm("确定删除该品牌吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          fetchDeleteDeviceBrand({ id: id }).then(() => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.$refs.pageContent.queryTblMain();
          });
        })
        .catch(() => { });
    },
    handleSetAdmin({ id }) {
      this.teamId = id;
      this.dialogVisibleSetManager = true;
    },
    handleConfirm(data) {
      this.btnLoading = true;
      fetchSaveDeviceBrand(data[0])
        .then(() => {
          deleteProfitByIds(data[1]).then(() => {
            this.dialogVisible = false;
            this.$message.success("操作成功");
            this.id = null;
            this.$refs.pageContent.queryTblMain();
          }).catch(err => {
            console.log(err);
          })
        })
        .finally(() => {
          this.btnLoading = false;
        });
    },
    handleConfirmSetManager(data) {
      this.btnLoading = true;
      setManager({
        id: this.teamId,
        managerId: data.managerId
      })
        .then(() => {
          this.dialogVisibleSetManager = false;
          this.$message.success("操作成功");
          this.$refs.pageContent.queryTblMain();
        })
        .finally(() => {
          this.btnLoading = false;
        });
    }
  },
};
</script>
